<template>
  <div class="video">
    <div v-for="(item, index) in videoList" :key="index" class="video-item">
      <div v-if="item.avatar || item.customer_name" class="video-item-header">
        <div>
          <u-avatar v-if="item.avatar" size="30" :src="item.avatar" />
        </div>
        <div v-if="item.customer_name" style="margin-left: 20rpx;">
          {{ item.customer_name }}
        </div>
      </div>
      <div class="video-item-content">
        <rich-text :nodes="item.content" />
      </div>

      <video v-if="item.video" class="video-item-src" :src="item.videoSrc" object-fit="cover" />

      <u-swiper
        circular
        indicator
        v-if="item.image"
        radius="8"
        height="150"
        duration="1000"
        interval="5000"
        key-name="imageUrl"
        :list="item.imageList"
        indicator-mode="dot"
        indicator-active-color="#78ffe6"
      />
      <div class="video-item-tag">{{ item.subject_name }}</div>

      <div class="video-item-bottom">
        <view class="left">
          <u-avatar v-if="defaultInfo.avatar" :src="defaultInfo.avatar" size="25" />
          <view v-if="defaultInfo.name" class="nickname">{{ defaultInfo.name }}</view>
        </view>
        <view class="right">
          <div v-if="!item.is_like" class="video-item-bottom-star" @click="onStar(index)">
            <u-icon name="thumb-up" color="rgba(0, 0, 0, 0.5)" size="20" />
            {{ item.like_num }}
          </div>
          <div v-else class="video-item-bottom-star">
            <u-icon name="thumb-up-fill" color="#78FFE6" size="20" />
            {{ item.like_num }}
          </div>
          <div class="video-item-bottom-share">
            <u-icon name="share-square" color="rgba(0, 0, 0, 0.5)" size="12" />
            转发
          </div>
        </view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    videoList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['defaultInfo'])
  },
  methods: {
    onStar(index) {
      this.$emit('onStar', 1, index)
    }
  }
}
</script>

<style lang="scss" scoped>
	.video {
		display: flex;
		flex-flow: column nowrap;
		row-gap: 20rpx;
		padding: 20rpx;

		&-item {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;

			&-header {
				display: flex;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				align-items: center;
        margin-bottom: 20rpx;
			}

			&-content {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 20rpx;
			}

			&-src {
				width: 100%;
				height: 282rpx;
				margin-top: 20rpx;
			}

			&-tag {
				padding: 4rpx 16rpx;
				background: #F1F1F1;
				border-radius: 19rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				display: inline-block;
				margin-top: 20rpx;
			}

			&-bottom {
				@include flex-between;
        margin-top: 15rpx;
        .left{
          @include flex-column-center;
          gap: 10rpx;
          .nickname{
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.5);
          }
        }
        .right{
          @include flex-end;
          .video-item-bottom-star {
          	font-weight: 400;
          	font-size: 20rpx;
          	color: rgba(0, 0, 0, 0.5);
          	line-height: 28rpx;
          	text-align: right;
          	font-style: normal;
          	display: flex;
          	align-items: center;
          }
          
          .video-item-bottom-share {
          	font-weight: 400;
          	font-size: 20rpx;
          	color: rgba(0, 0, 0, 0.5);
          	line-height: 28rpx;
          	text-align: right;
          	font-style: normal;
          	display: flex;
          	align-items: center;
          	margin-left: 32rpx;
          }
        }
			}
		}
	}
</style>
